<template>
    <div>
        <c-template v-loading="loading" class="mb-lg tf-paragraph">
            <el-row :gutter="24" class="info-row">
                <el-col :span="24" class="detailsTitle mb-0">结算明细</el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row :gutter="24" class="info-row">
                <el-col :span="8">
                    供应商结算银行名称：<span>{{orderInfo.bankName}}</span>
                </el-col>
                <el-col :span="8">
                    银行账号：<span>{{orderInfo.accountNo}}</span>
                </el-col>
                <el-col :span="8">
                    账户名称：<span>{{orderInfo.accountName}}</span>
                </el-col>
                <el-col :span="8">
                    结算订单号：<span>{{orderInfo.id}}</span>
                </el-col>
                <el-col :span="8">
                    结算金额：<span>{{orderInfo.amount}}元</span>
                </el-col>
                <el-col :span="8" v-if="orderInfo.payProofUrl!= null">
                    支付凭证：<el-link type="primary" @click="handleOpenFile(orderInfo.payProofUrl)">查看</el-link>
                </el-col>

            </el-row>
        </c-template>

    </div>
</template>
<script>
export default {

    data () {
        return {
            loading: false,
            orderInfo: {

            },
            id: ""
        };
    },
    mounted () {
        this.getInfo()
    },
    methods: {

        handleOpenFile (filePath) {
            if (filePath) {
                window.open(filePath);
            } else {
                this.$message.warning("服务器地址不存在");
            }
        },
        async getInfo () {
            if (this.$route.query.id) {
                this.id = this.$route.query.id
                const params = {
                    id: this.$route.query.id,
                };
                this.loading = true;
                let res = await this.$get({ url: "/sellerSettle/detail", params })
                this.orderInfo = res
                this.loading = false;
            }
        },
    },
};
</script>
<style scoped lang="scss">
.imgList {
    display: flex;
    .el-image {
        width: 30%;
        margin: 0 auto;
    }
}
</style>